<template>
    <div class="m-appoint-item">
        <div class="m-appoint-shop">
            万达店
            <button @click="cancelAppoint(appointInfo.ID)">取消预约</button>
        </div>
        <ul class="m-appoint-info">
            <li>
                <img src="@/assets/images/appoint-technician@2x.png" alt="">
                <span>技师：{{appointInfo.employee}}</span>
            </li>
            <li>
                <img src="@/assets/images/appoint-project@2x.png" alt="">
                <span>预约项目：{{appointInfo.lprojectname}}</span>
            </li>
            <li>
                <img src="@/assets/images/appoint-time@2x.png" alt="">
                <span>预约时间：{{appointInfo.PlanWakeUpDateEnd.split('.')[0]}}</span>
            </li>
            
            <img src="@/assets/images/success.png" alt="" class='serviced' v-if="!isServiced"><!-- 未服务 -->
            <img src="@/assets/images/serviced@2x.png" alt="" class='serviced' v-else><!-- 已服务 -->
        </ul>
    </div>
</template>
<script>
import {cancelAppointment} from '@/api/appointment';
export default {
    name:'',
    props:['appointInfo'],
    data() {
        return {
            isServiced:false,
        }
    },
    methods: {
        cancelAppoint(id) {
            let param = {
                id:id
            }
            this.$messagebox.confirm('确定取消预约？').then(action=>{
                console.log('确定');
                cancelAppointment(param).then((result) => {
                    this.$toast('操作成功');
                    this.$emit('cancelAppoint',id);
                }).catch((err) => {
                    
                });
            });
            
        }
    }
}
</script>
<style lang="less" scoped>
.m-appoint-item{
    background: white;
    .border-radius(6px);
    .m-appoint-shop{
        .flex;
        justify-content: space-between;
        padding: .8rem;
        border-bottom: 1px solid @background-gray;
        button{
            border: 1px solid @primary-green;
            color: @primary-green;
            padding: .2rem .4rem;
            .border-radius(10px);
        }
    }
    .m-appoint-info{
        position: relative;
        li{
            padding: .4rem .8rem;
            color: @secondary-gray;
            img{
                width: 1.2rem;
                margin-right: .6rem;
            }
        }
        .serviced{
            position: absolute;
            right: 0;
            top: 1rem;
            z-index: 2;
            width: 5rem;
        }
    }
}
</style>
